<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- controls 显示自带的控件 -->
    <audio class="audio" src="./01.mp3"></audio>
    <button class="pre">上一曲</button>
    <button class="btn1">播放</button>
    <button class="btn2">静音</button>
    <button class="btn3">停止</button>
    <button class="next">下一曲</button>

    <script>
        var audio = document.getElementsByClassName('audio')[0];
        var btn1 = document.querySelector('.btn1')
        var btn2 = document.querySelector('.btn2')
        var btn3 = document.querySelector('.btn3')
        var pre = document.querySelector('.pre')
        var next = document.querySelector('.next')
        // 歌单
        var playList = ['./01.mp3', './02.mp3'];
        // 当前是第几首
        var playIndex = 0;
        // 切换播放状态
        btn1.onclick = function () {
            // 获取播放状态
            if (audio.paused) {
                // 文字切换
                btn1.innerHTML = '暂停';
                audio.play()
            } else {
                btn1.innerHTML = '播放';
                audio.pause()
            }
        }
        // 静音切换
        btn2.onclick = function () {
            audio.muted = !audio.muted
        }
        // 停止
        btn3.onclick = function () {
            audio.pause();
            // 播放进度归零
            audio.currentTime = 0;
        }
        // 下一曲
        next.onclick = function () {
            playIndex < playList.length - 1 ? playIndex++ : playIndex = 0;
            // 修改src属性
            audio.setAttribute('src', playList[playIndex]);
            audio.play()
        }
        // 上一曲
        pre.onclick = function () {
            playIndex > 0 ? playIndex-- : playIndex = playList.length - 1;
            // 修改src属性
            audio.setAttribute('src', playList[playIndex]);
            audio.play()
        }
    </script>
</body>

</html>